<template>
  <div>
  <van-nav-bar
      title="确认地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="goClickright"
  />
  <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
  />
  </div>
</template>

<script>


import { mapState } from "vuex";
import { areaList } from '@vant/area-data';
import Ax from "../axios";

const ax = new Ax()
export default {
  name: "AddressEdit",
  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  computed:{
   ...mapState("login", ["token"])
  },
  methods: {
    goClickright(){
      //这里点击下订单
      console.log("下订单")
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    onSave(val) {
      ax.addressCreate(this.token, {
        province:val.province,
        city: val.city,
        area: val.county,
        detailed: val.addressDetail,
        default: val.isDefault
      }).then(response=>{
        if (response.status === 201){
          console.log("添加成功")
        }
      })

    },
    onDelete() {
      console.log("删除地址");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },

}
</script>

<style scoped>

</style>